<template>
  <div>
    <div class="detail">
      <p class="flex-b">课程名称：{{ state.detail.kechengmingcheng }}</p>
      <p>观看链接：{{ state.detail.lianjie }}</p>
      <p class="flex-c" style="justify-content: start">
        图片：<img
          v-if="state.detail?.tupian && state.detail?.tupian.length"
          style="max-width: 250px"
          :src="state.detail.tupian[0].filePath"
          alt=""
        />
      </p>
      <p class="flex-c" style="justify-content: start">
        缩略图：<img
          v-if="state.detail?.suoluetu && state.detail?.suoluetu.length"
          style="max-width: 250px"
          :src="state.detail.suoluetu[0].filePath"
          alt=""
        />
      </p>
      <p>培训介绍：</p>
      <div class="mt20" v-html="state.detail.peixunjieshao"></div>
      <p>状态：{{ state.detail?.shangjia?.code == 1 ? "已上架" : "已下架" }}</p>
      <div class="flex-c">
        <el-button type="primary" @click="toEdit">编辑</el-button>
        <el-button
          type="primary"
          style="margin-left: 50px"
          @click="$router.go(-1)"
          >返回</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetOpenLessonDetail } from "@/api/openLesson";
const route = useRoute();
const router = useRouter();
const state = reactive({
  detail: {},
});
const GetList = () => {
  GetOpenLessonDetail({ id: route.query.id }).then((res) => {
    if (res.code === 4201) {
      state.detail = res.data;
    }
  });
};
const toEdit = () => {
  router.push({
    path: `/gongkaike/info`,
    query: {
      id: state.detail.id,
      type: "edit",
    },
  });
};
GetList();
</script>
<style lang="scss" scoped>
.detail {
  padding: 1px 30px 30px 30px;
  font-size: 16px;
  color: #000;
  p {
    margin-top: 30px;
  }
}
</style>
